<!DOCTYPE html>
<html lang="en" class="HelpWrap">
<head>
	<meta charset="UTF-8">
	<title>苏尼特右旗-求助管理</title>
	<meta name="keywords" content="苏尼特右旗-求助管理">
    <meta name="description" content="苏尼特右旗-求助管理">
	<link rel="stylesheet" href="$!webPath/index/css/reset.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/index/css/index.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/assets/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
	<!-- <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css"> -->
</head>
<body>
	<div class="HelpManagement">
		<div class="helpList">
			<div class="listHeader">
				<span>$familyHelpPOList.size()</span>
				<h3>求助列表</h3>
				<select id="helpTypeSel" class="helpSelect">
					<option value="0"  selected="selected">未解决</option>
					<option value="1">已解决</option>
				</select>
				<input id="helpContent" type="text" value="$!content" class="searchInput" placeholder="求助内容">
				<em id="helpSearchBtn" class="fa fa-search"></em>
			</div>
			<div class="listCon">
				#if($familyHelpPOList.size()==0)
				<div class="noThing">
					<img src="$!webPath/images/empty.png" class="noThing-img">
					<h4>暂无信息...</h4>
				</div>
				#end
				#foreach($item in $familyHelpPOList)
				<div class="listBox  helpItem" helpContent="$!item.helpContent"  userName="$!item.UserName" helpStateValue="$!item.helpStateValue" helpDate="$dateTool.format("yyyy-MM-dd HH:mm",$!item.helpDate)"  headImgUrl="$!item.headImgUrl" helpId="$!item.helpId">
					<img src="$item.headImgUrl" alt="头像">
					<div class="helpCon">
						<strong>$!item.userName</strong>
						<em>$dateTool.format("yyyy-MM-dd HH:mm",$!item.helpDate)</em>
						<p>$!item.helpContent</p>
						<div class="unComplete">
							<span>$!item.helpStateValue</span>
						</div>
						#if($!item.helpStateValue=="未解决")
						<div class="unComplete unComplete-type1">
							<span>$!item.helpStateValue</span>
						</div>
						#end
						#if($!item.helpStateValue=="已解决")
						<div class="unComplete unComplete-type2">
							<span>$!item.helpStateValue</span>
						</div>
						#end
					</div>
				</div>
				#end
			</div>
		</div>
		<div class="helpDetails">
			<h3 class="helpTitle">求助解决</h3>
			<div  class="DetailsCon">
				<div id="heloDetaiDiv" class="listBox">
					<img src="$!webPath/images/empty.png" class="noThing-img">
					<h4 class="textCenter">暂无信息...</h4>
				</div>
				<div id="replyListIDiv" class="reply clearfix">
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="$!webPath/index/js/jquery-1.11.3.min.js"></script>
<script>
	jQuery(function($) {
		$("#helpTypeSel").val($!helpState);
		$("#helpSearchBtn").on('click',function () {
			var helpTypeSel = $("#helpTypeSel").val();
			var helpContent = $("#helpContent").val();
			window.location.href="$!webPath/qzgl/helpMain?townId=$!townId&villageId=$!villageId&helpState=" +helpTypeSel+"&content=" + helpContent;
		});
		$("#helpTypeSel").on('change',function () {
			var helpTypeSel = $("#helpTypeSel").val();
			var helpContent = $("#helpContent").val();
			window.location.href="$!webPath/qzgl/helpMain?townId=$!townId&villageId=$!villageId&helpState=" +helpTypeSel+"&content=" + helpContent;
		})
		$(".helpItem").on('click',function () {
			var helpId = $(this).attr('helpId');
			var helpDate = $(this).attr('helpDate');
			var helpStateValue = $(this).attr('helpStateValue');
			var helpDate = $(this).attr('helpDate');
			var headImgUrl = $(this).attr('headImgUrl');
			var userName = $(this).attr('userName');
			var helpContent = $(this).attr("helpContent")
			$(".helpItem").removeClass('active');
			$(this).addClass('active');
			$("#heloDetaiDiv").empty()
			$("#replyListIDiv").empty()
			$("#heloDetaiDiv").prepend(createHelpDiv(headImgUrl,userName,helpContent,helpDate,helpStateValue))
			$.ajax({
				url:"$!webPath/qzgl/replyList",
				data:{'helpId': helpId},
				dataType:"json",
				type:"post",
				success:function(data){
					if(data.code==0){
						$.each(data.rspData,function (i,ob) {
							$("#replyListIDiv").append(createReplyDiv(ob.headImgUrl,ob.content,ob.userName,ob.createDate))
						})
					}
				}
			})
		});
	})
	function createHelpDiv(headImgUrl,userName,content,date,type) {
		var helpDiv = '<img src="'+headImgUrl+'" alt="求助人头像">'
		helpDiv	= helpDiv +	'<div class="helpCon"> <strong>'+userName+'</strong> <em>'+date+'</em> <p>'+content+'</p>';
		if(type == "已解决"){
            helpDiv	= helpDiv + '<div class="unComplete unComplete-type2"> <span>'+type+'</span> </div> </div> ';
		}else if(type == "未解决") {
            helpDiv	= helpDiv + '<div class="unComplete unComplete-type1"> <span>'+type+'</span> </div> </div> ';
		}
		return helpDiv;
	}
	function createReplyDiv(headImgUrl,content,userName,date){
		var replyDiv = '<div class="clearfix"> <div class="replyCon"> <span></span> <p style="min-height: 40px">'+content+'</p> <strong>'+date+'</strong> </div><div class="eplyPeo"> <img src="'+headImgUrl+'" alt="处理人头像">'
		replyDiv = replyDiv + '<strong>'+userName+'</strong> </div></div>'
		return replyDiv
	}

    function createReplyDiv2(headImgUrl,content,userName,date){
        var replyDiv = '<div class="clearfix"> <div class="eplyPeo"> <img src="'+headImgUrl+'" alt="处理人头像">'
        replyDiv = replyDiv + '<strong>'+userName+'</strong> </div><div class="replyCon2"> <span></span> <p style="min-height: 40px">'+content+'</p> <strong>'+date+'</strong> </div></div>'
        return replyDiv
    }
</script>
</body>
</html>